<template>
	<div class="components-container">
		<split-pane :min-percent='20' :default-percent='20' split="vertical">
			<template slot="paneL">
				<div class="left-container container-shadow">
					<el-form :inline="true" class="left-header">
						<el-form-item label="">
							<el-input placeholder="输入关键字进行过滤" v-model="filterRoleText">
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="addRole" circle><i class="el-icon-plus" /></el-button>
							<el-button type="primary" @click="getRoleList" circle><i class="el-icon-search" />
							</el-button>
						</el-form-item>
					</el-form>
					<el-tree class="filter-tree" ref="roleTree" :data="roleList" :props="roleProps" default-expand-all
						show-checkbox :filter-node-method="filterRoleNode" @check-change="roleSelected"
						:highlight-current="roleProps.roleHighlight" :check-strictly="roleProps.checkStrictly"
						node-key="roleCode">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>
								{{ data.roleName }}</span>
							<span>
								<el-button type="text" size="mini" @click="() => editRole(data)">
									编辑
								</el-button>
								<el-button type="text" class="del-btn" size="mini" @click="() => deleteRole(data)">
									删除
								</el-button>
							</span>
						</span>
					</el-tree>
				</div>
			</template>
			<template slot="paneR">
				<split-pane  :min-percent='30' :default-percent='30' split="vertical">
					<template slot="paneL">
						<div class="container-shadow menu-search" style="height: 100%; overflow:auto;padding: 0.3rem;">
							<el-row>
								<el-form :inline="true">
									<el-form-item>
										<el-input placeholder="输入关键字进行过滤" v-model="filterMenuText">
										</el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" plain @click="addMenu" circle><i
												class="el-icon-plus" /></el-button>
										<el-button type="primary" @click="getMenuList" circle><i
												class="el-icon-search" /></el-button>
										<el-button type="success" @click="saveRoleMenu" icon="el-icon-check" circle>
										</el-button>
									</el-form-item>
								</el-form>
							</el-row>
							<el-row style="height: 90%;overflow-y: auto;">
								<el-tree class="filter-tree" ref="menuTree" :data="menuList" :props="menuProps"
									default-expand-all show-checkbox :filter-node-method="filterMenuNode"
									:highlight-current="menuProps.menuHighlight"
									:check-strictly="menuProps.checkStrictly" node-key="menuCode">
									<span class="custom-tree-node" slot-scope="{ node, data }">
										<span> {{ data.menuName }}</span>
										<span>
											<el-button type="text" size="mini" @click="() => editMenu(data)">
												编辑
											</el-button>
											<el-button type="text" class="del-btn" size="mini"
												@click="() => deleteMenu(data)">
												删除
											</el-button>
										</span>
									</span>
								</el-tree>
							</el-row>
						</div>
					</template>
					<template slot="paneR">
						<div style="height: 100%; overflow:auto;padding: 0.3rem;">
							<el-form :inline="true" class="user-search">
								<el-form-item label="">
									<el-input placeholder="用户名称" v-model="searchFrom.userName">
									</el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="getList" circle><i class="el-icon-search" />
									</el-button>
								</el-form-item>
							</el-form>
							<el-table ref="userTable" stripe max-height="700px" v-loading="listLoading" :data="list"
								border fit highlight-current-row style="width: 100%" @select="userChecked">
								<el-table-column type="selection" width="55">
								</el-table-column>
								<el-table-column v-for="item in tableColumn" :key="item.field" align="center"
									:label="item.title" :width="item.width">
									<template slot-scope="{row}">
										<template v-if="item.edit == 'select'">
											<el-select v-model="row[item.field]" filterable placeholder="请选择查询方式"
												class="filter-item">
												<el-option v-for="item in queryList" :key="item.key" :label="item.value"
													:value="item.key" />
											</el-select>
										</template>
										<template v-else-if="item.edit == 'input'">
											<el-input v-model="row[item.field]" class="edit-input" size="small" />
										</template>
										<template v-else-if="item.edit == 'checkBox'">
											<el-checkbox v-model="row[item.field]"></el-checkbox>
										</template>
										<template v-else>
											<span>{{ row[item.field] }}</span>
										</template>
									</template>
								</el-table-column>
							</el-table>
							<el-pagination @size-change="pageSizeChange" @current-change="currentPageChange"
								:current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="page.total" background>
							</el-pagination>
						</div>
					</template>
				</split-pane>
			</template>
		</split-pane>
		<el-dialog width="25%" :visible.sync="roleEditFormVisible" center>
			<div slot="title" class="dialog-title">
				<div class="dialog-header">
					角色信息
				</div>
			</div>
			<roleEdit :roleInfo="roleInfo" />
			<div slot="footer" class="dialog-footer">
				<div class="dialog-btn-top">
					<el-button type="danger" icon="el-icon-close" @click="roleEditFormVisible = false">取 消</el-button>
					<el-button icon="el-icon-check" type="primary" @click="saveRole">保 存</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog width="40%" title="" :visible.sync="menuEditFormVisible" center>
			<div slot="title" class="dialog-title">
				<div class="dialog-header">
					菜单信息
				</div>
			</div>
			<menuEdit :menuInfo="menuInfo" />
			<div slot="footer" class="dialog-footer">
				<div class="dialog-btn-top">
					<el-button type="danger" icon="el-icon-close" @click="menuEditFormVisible = false">取 消</el-button>
					<el-button icon="el-icon-check" type="primary" @click="saveMenu">保 存</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import splitPane from 'vue-splitpane'
	import request from '@/utils/request'
	import roleEdit from '@/views/system/user-auth/role-edit.vue'
	import menuEdit from '@/views/system/user-auth/menu-edit.vue'
	export default {
		name: 'userAuthList',
		components: {
			splitPane,
			roleEdit,
			menuEdit
		},
		data() {
			return {
				//角色
				filterRoleText: "",
				//角色编辑页是否显示
				roleEditFormVisible: false,
				//角色信息
				roleInfo: {},
				//角色列表
				roleList: [],
				//角色树配置
				roleProps: {
					children: 'children',
					label: 'label',
					roleHighlight: true,
					checkStrictly: true,
					filterText: ""
				},
				//菜单
				filterMenuText: "",
				//角色列表
				menuList: [],
				//菜单信息
				menuInfo: {
					menuId: "",
					menuCode: "",
					menuName: "",
					menuUrl: "",
					menuLogo: "",
					menuParentCode: "",
					menuType: "",
					menuEnable: ""
				},
				menuEditFormVisible: false,
				//角色树配置
				menuProps: {
					children: 'children',
					label: 'label',
					menuHighlight: true,
					checkStrictly: true,
					filterText: ""
				},
				//用户
				filterUserText: "",
				//用户列表
				userList: [],
				//用户树配置
				userProps: {
					children: 'children',
					label: 'label',
					userHighlight: true,
					checkStrictly: true,
					filterText: ""
				},
				//搜索表单
				searchFrom: {
					userId: "",
					userLoginName: "",
					userPassword: "",
					userName: "",
					userPhone: "",
					userEmail: "",
					userIdcard: "",
					pageNo: 1,
					pageSize: 10
				},
				//表的下拉数据
				tableList: [],
				//正在编辑的用户信息
				userInfo: {
					userId: "",
					userLoginName: "",
					userPassword: "",
					userName: "",
					userPhone: "",
					userEmail: "",
					userIdcard: "",
					departmentCodes: ""
				},
				//表头
				tableColumn: [{
					field: 'userLoginName',
					title: '用户名称',
				}, {
					field: 'userName',
					title: '姓名',
				}],
				//查询方式列表
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				},
				//当前应该被选中的用户列表
				checkedUserList: []
			}
		},
		watch: {
			//角色搜索
			filterRoleText(val) {
				this.$refs.roleTree.filter(val);
			},
			//菜单搜索
			filterMenuText(val) {
				this.$refs.menuTree.filter(val);
			}
		},
		//页面初始化加载
		created() {
			this.getRoleList();
			this.getMenuList();
			this.getList();
		},
		methods: {
			//编辑角色
			editRole(role) {
				this.roleInfo = role;
				this.roleEditFormVisible = true;
			},
			//添加角色
			addRole() {
				this.roleInfo = {};
				this.roleEditFormVisible = true;
			},
			//保存角色
			saveRole() {
				var url = '/system/role/insert';
				if (this.roleInfo.roleId) {
					url = '/system/role/update';
				}
				request({
					url: url,
					method: 'post',
					data: this.roleInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getRoleList();
					this.roleEditFormVisible = false;
				})
			},
			//获取角色
			getRoleList() {
				request({
					url: '/system/role/query',
					method: 'post',
					data: this.roleSearch
				}).then(response => {
					this.roleList = response.data
				})
			},
			//删除角色
			deleteRole(role) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDeleteRole(role)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDeleteRole(role) {
				var url = '/system/role/delete';
				request({
					url: url,
					method: 'post',
					data: {
						roleId: role.roleId
					}
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getRoleList();
					this.roleEditFormVisible = false;
				})
			},
			//角色选择
			roleSelected(data, checked) {
				var roleCheckedList = this.$refs.roleTree.getCheckedKeys();
				if (checked) {
					this.roleClear(data, checked);
				}
				if (roleCheckedList.length != 1) {
					this.menuClear();
					this.$refs["userTable"].clearSelection();
				}
				var _this = this;
				if (checked) {
					request({
						url: '/system/roleMenu/query',
						method: 'post',
						data: {
							rmRoleCode: data.roleCode
						}
					}).then(response => {
						for (var i = 0; i < response.data.length; i++) {
							_this.$refs.menuTree.setChecked(response.data[i].rmMenuCode, true);
						}
					})

					request({
						url: '/system/userRole/query',
						method: 'post',
						data: {
							urRoleCode: data.roleCode
						}
					}).then(response => {
						_this.checkedUserList = response.data;
						_this.userCheckedChange();
					})
				}
			},
			userCheckedChange() {
				this.$refs["userTable"].clearSelection();
				for (var i = 0; i < this.checkedUserList.length; i++) {
					for (var j = 0; j < this.list.length; j++) {
						if (this.checkedUserList[i].urUserId == this.list[j].userId) {
							this.$refs["userTable"].toggleRowSelection(this.list[j], true);
						}
					}
				}
			},
			//清除其他选中的角色
			roleClear(currentNode, checked) {
				var roleCheckedList = this.$refs.roleTree.getCheckedKeys();
				for (var i = 0; i < roleCheckedList.length; i++) {
					if (!checked || roleCheckedList[i] != currentNode.roleCode) {
						this.$refs.roleTree.setChecked(roleCheckedList[i], false);
					}
				}
			},
			//清除选中的菜单
			menuClear() {
				var menuCheckedList = this.$refs.menuTree.getCheckedKeys();
				for (var i = 0; i < menuCheckedList.length; i++) {
					this.$refs.menuTree.setChecked(menuCheckedList[i], false);
				}
			},
			//筛选角色
			filterRoleNode(value, data) {
				if (!value) {
					return true;
				}
				return data.roleName.indexOf(value) !== -1;
			},
			//编辑菜单
			editMenu(menu) {
				this.menuInfo = menu;
				if(menu.menuParams){
					this.menuInfo.menuParamsJson = JSON.parse(menu.menuParams)
				}else{
					this.menuInfo.menuParamsJson = {};
				}

				this.menuEditFormVisible = true;
			},
			//添加菜单
			addMenu() {
				this.menuInfo = {
					menuId: "",
					menuCode: "",
					menuName: "",
					menuUrl: "",
					menuLogo: "",
					menuParentCode: "",
					menuType: "",
					menuEnable: "",
					menuParams: "",
					menuParamsJson:{}
				}
				this.menuEditFormVisible = true;
			},
			//获取菜单列表
			getMenuList() {
				request({
					url: '/system/menu/queryTree',
					method: 'post'
				}).then(response => {
					this.menuList = response.data
				})
			},
			//删除菜单
			deleteMenu(menu) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDeleteMenu(menu)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除菜单操作
			confirmDeleteMenu(menu) {
				var url = '/system/menu/delete';
				request({
					url: url,
					method: 'post',
					data: {
						menuId: menu.menuId
					}
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getMenuList();
					this.menuEditFormVisible = false;
				})
			},
			//保存角色菜单关联配置
			saveRoleMenu() {
				var roleList = this.$refs.roleTree.getCheckedKeys();
				if (roleList.length == 0) {
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, "请先勾选角色再保存配置")
					});
					return;
				}
				var menuCheckList = this.$refs.menuTree.getCheckedKeys();
				var params = {
					menuArr: menuCheckList,
					roleCode: roleList[0]
				}
				request({
					url: '/system/roleMenu/insertBatch',
					method: 'post',
					data: params
				}).then(response => {
					debugger
				})
			},
			//菜单筛选
			filterMenuNode(value, data) {
				if (!value) {
					return true;
				}
				return data.menuName.indexOf(value) !== -1;
			},
			//保存菜单配置
			saveMenu() {
				var url = '/system/menu/insert';
				if (this.menuInfo.menuId) {
					url = '/system/menu/update';
				}
				debugger
				var param = this.menuInfo;
				delete param["children"]
				if(this.menuInfo.menuParamsJson){
					param.menuParams = JSON.stringify(this.menuInfo.menuParamsJson)
				}
				request({
					url: url,
					method: 'post',
					data: this.menuInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getMenuList();
					this.menuEditFormVisible = false;
				})
			},
			//查询用户列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/system/user/queryByPage',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
					//数据渲染完成后再次赋值选中的数据
					this.$nextTick(function() {
						this.userCheckedChange()
					})
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//用户选择
			userChecked(rows, current) {
				var _this = this;
				var url = "/system/userRole/delete";
				for (var i = 0; i < rows.length; i++) {
					if (rows[i].userId == current.userId) {
						url = "/system/userRole/insert";
					}
				}
				var checkedNodes = this.$refs.roleTree.getCheckedNodes();
				if (checkedNodes.length == 0) {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, "请勾选需要取消的角色")
					});
					return;
				}
				request({
					url: url,
					method: 'post',
					data: {
						urRoleCode: checkedNodes[0].roleCode,
						urUserId: current.userId
					}
				}).then(response => {

				})
			},
		}
	}
</script>

<style>
	.menu-search {}

	.left-header {
		display: flex;
		align-items: center;
		flex-direction: row
	}

	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}


	.top-container {
		width: 100%;
		height: 100%;
	}

	.el-row {
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-pagination {
		float: right;
	}
</style>
